<template>
  <div class="major-attribute">
    <div class="character-level">
      <div class="character-level-label">等级</div>
      <div class="character-level-number">{{ character.attribute.level }}</div>
    </div>
    <div class="character-state">
      <div class="character-state-row">
        <div class="character-state-hp">
          <div class="character-state-label">生命</div>
          <div class="character-state-bar">
            <Progress :percent="character.hpPercent" stroke-color="#FF461F" :stroke-width="24" hide-info />
            <div class="character-state-bar-label">[ {{ character.attribute.hp.current }} / {{ character.attribute.hp.max }} ]</div>
          </div>
        </div>
        <div class="character-state-mp">
          <div class="character-state-label">魔法</div>
          <div class="character-state-bar">
            <Progress :percent="character.mpPercent" stroke-color="#44CEF6" :stroke-width="24" hide-info />
            <div class="character-state-bar-label">[ {{ character.attribute.mp.current }} / {{ character.attribute.mp.max }} ]</div>
          </div>
        </div>
      </div>
      <div class="character-state-row">
        <div class="character-state-exp">
          <div class="character-state-label">经验</div>
          <div class="character-state-bar">
            <Progress :percent="character.expPercent" stroke-color="#FCC800" :stroke-width="24" hide-info />
            <div class="character-state-bar-label">{{ expPercentShow }}% [ {{ character.attribute.exp.current }} / {{ character.attribute.exp.max }} ]</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MajorAttribute',

  data() {
    return {
      character: {}
    }
  },

  computed: {
    expPercentShow() {
      return this.$util.transformDecimal((this.character.expPercent), 2)
    },
  },
  
  beforeMount() {
    this.character = this.$game.tempData.character
  },
}
</script>

<style lang="scss">

</style>
